<template>
	<div>
		<ebook-shelf></ebook-shelf>
		<transition name='slide-down'>
			<div class="title-wrapper" v-show="menuVisible" :class='{"hide-box-shadow":!menuVisible || settingVisible === 4}'>
				<div class="left">
					<span class="icon-back" @click="showMessage"></span>
				</div>
				<div class="right">
					<div class="icon-wrapper">
						<span class="icon-shelf" @click="showSetting(4)"></span>
					</div>
					<div class="icon-wrapper">
						<span class="icon-cart" @click="showMessage"></span>
					</div>
					<div class="icon-wrapper">
						<span class="icon-more" @click="showMessage"></span>
					</div>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
	import EbookShelf from 'components/ebook/EbookShelf'

	import { ebookMixin } from 'utils/mixin'

	export default {
		name: "EbookTitle",
		mixins: [ebookMixin],
		components: {
			EbookShelf
		},
		data() {
			return {
				isShelfShow: false
			}
		},
		methods: {
			showMessage() {
				this.$toast.show('敬请期待!')
			},
			showSetting(key) {
				this.setSettingVisible(key)
			}
		},
	}
</script>

<style lang='scss' scoped>
@import 'assets/styles/global';

.title-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 501;
	display: flex;
	width: 100%;
	height: px2rem(44);
	background: white;
	box-shadow: 0 px2rem(8) px2rem(8) rgba(0, 0, 0, .15);
	&.hide-box-shadow {
		box-shadow: none;
	}
	.left {
		flex: 0 0 px2rem(60);
		margin-left: px2rem(15);
		@include left;
		.icon-back {
			font-size: px2rem(20);
		}
	}
	.right {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		.icon-wrapper{
			flex: 0 0 px2rem(40);
			@include center;
			.icon-shelf {
				font-size: px2rem(20);
			}
			.icon-cart {
				font-size: px2rem(20);
			}
			.icon-more {
				font-size: px2rem(20);
			}
		}
	}
}
</style>